<!--非煤矿山建设项目安全设施“三同时”基本情况统计表-->
<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
              <Col span="8">
                <FormItem label="单位名称：" prop="order">
                  <company-select v-model="dataToQuery.companyName" class="query-form-el"></company-select>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label='二级集团：' prop='twoLevelOrgId'>
                  <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgId"></two-level-org>
                </FormItem>
              </Col>

              <Col span="8" v-if="!switchFlag">
                <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                <Button @click="reset" class="ivu-btn-reset">重置</Button>
                <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
              </Col>
              <Col span="8" v-else>
                <FormItem label='建设项目类型：' prop='processingMethodId'>
                  <!--multiple :max-tag-count="2"-->
                  <Select v-model='dataToQuery.projectType' placeholder="请选择建设项目类型" class='query-form-el'>
                            <Option v-for="item in dictMap.projectTypeNames" :value="item.codingCodeId"
                                    :key="item.codingCodeId">{{item.codingName }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
          <Row v-show="switchFlag" class="query-form">
            <Col span="8">
              <FormItem label='企业类型：'>
                <Select v-model='dataToQuery.companyType' placeholder="请选择企业类型" class='query-form-el'>
                  <Option v-for="item in dictMap.companyTypeNames" :value="item.codingCodeId"
                          :key="item.codingCodeId">{{ item.codingName }}
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8" offset="8">
              <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
              <Button @click="reset" class="ivu-btn-reset">重置</Button>
              <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            </Col>
          </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                    <!--<Button size="large" class="ivu-btn-add" icon="md-download" @click="downloadDescriptionExcel">导出模板</Button>-->
                    <!--<Button size="large" class="ivu-btn-add" icon="md-cloud-upload" @click="beachUpload">批量导入</Button>-->
                    <download-button :api="exportUrl" :queryForm="dataToQuery" />
                    <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportList">导出 -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows' @on-sort-change="querySort"
               :loading='pageStatus.loading'
               border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal :title="this.getModalTitle('非煤矿山建设项目安全设施“三同时”基本情况统计表')" :transfer=false :mask-closable="false" v-model="dialogShow"
               v-if="dataToView && dialogShow" :width=800 class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                          :model="dataToView" :rules="mode === 'view'?{}:ruleCustom"
                          :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='单位名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                                    <div v-else>
                                        <cascader-dom  v-if="show"  class='query-form-el' ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true"
                                                       :currentOrgId="dataToView.companyId"
                                                       :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                    </div>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='考核编号：' prop='unitNo'>
                                    <div v-if="mode === 'view'">{{ dataToView.unitNo }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写考核编号" type='text' v-model='dataToView.unitNo'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='企业类型：' prop='companyType'>
                                    <div v-if="mode === 'view'">{{ dataToView.companyTypeName }}</div>
                                    <!--<Input v-else class='query-form-el' placeholder="请填写企业类型" type='text' v-model='dataToView.companyType'></Input>-->
                                    <Select  v-else v-model='dataToView.companyType' placeholder="请选择企业类型" class='query-form-el'>
                                        <Option v-for="item in dictMap.companyTypeNames" :value="item.codingCodeId"
                                                :key="item.codingCodeId">{{item.codingName }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='建设项目名称：' prop='projectName'>
                                    <div v-if="mode === 'view'">{{ dataToView.projectName }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写建设项目名称" type='text' v-model='dataToView.projectName'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='建设项目类型：' prop='projectType'>
                                    <div v-if="mode === 'view'">{{ dataToView.projectTypeName }}</div>
                                    <!--<Input v-else class='query-form-el' placeholder="请填写建设项目类型" type='text' v-model='dataToView.projectType'></Input>-->
                                    <Select  v-else v-model='dataToView.projectType' placeholder="请选择建设项目类型" class='query-form-el'>
                                        <Option v-for="item in dictMap.projectTypeNames" :value="item.codingCodeId"
                                                :key="item.codingCodeId">{{item.codingName }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='设计开采深度/设计最大边坡高度/设计总库容：' prop='storage'>
                                    <div v-if="mode === 'view'">{{ dataToView.storage }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写设计开采深度/设计最大边坡高度/设计总库容" type='text' v-model='dataToView.storage'></Input>
                                </FormItem>
                            </Col>
                            <Col span="23" v-if="mode !== 'view'">
                                <Alert type="warning">地下矿山填写设计开采深度、露天矿山填写设计最大边坡高度，尾矿库填写设计总库容，单位为m或万m³，请直接填写标高</Alert>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='安全设施设计单位：' prop='designUnit'>
                                    <div v-if="mode === 'view'">{{ dataToView.designUnit }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写安全设施设计单位" type='text' v-model='dataToView.designUnit'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='安全预评价单位：' prop='preEvaluationUnit'>
                                    <div v-if="mode === 'view'">{{ dataToView.preEvaluationUnit }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写安全预评价单位" type='text' v-model='dataToView.preEvaluationUnit'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='审查部门：' prop='reviewDepartment'>
                                    <div v-if="mode === 'view'">{{ dataToView.reviewDepartment }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写审查部门" type='text' v-model='dataToView.reviewDepartment'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='施工单位：' prop='constructionUnit'>
                                    <div v-if="mode === 'view'">{{ dataToView.constructionUnit }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写施工单位" type='text' v-model='dataToView.constructionUnit'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='监理单位：' prop='controlUnit'>
                                    <div v-if="mode === 'view'">{{ dataToView.controlUnit }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写监理单位" type='text' v-model='dataToView.controlUnit'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='竣工验收时间：' prop='acceptanceTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate( dataToView.acceptanceTime) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择竣工验收时间" v-model='dataToView.acceptanceTime' ></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人：' prop='createUserName'>
                                    <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly
                                           v-model='dataToView.createUserName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填报时间：' prop='createDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                                                v-model='dataToView.createDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人手机号：' prop='mobileNumber'>
                                    <div v-if="mode === 'view'">{{ dataToView.mobileNumber }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写手机号" type='text' v-model='dataToView.mobileNumber'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11"></Col>
                        </Row>

                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
                </Button>
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>


    </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from '@/common/cacheUtils.js';

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  components: {cascaderDom},
  data() {
    return {
      ...this.createCommonDataField(),
      imgUrl: "",
      columns1: [
        {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '单位名称', align: 'center', minWidth: 160,},
        {key: 'unitNo', title: '绩效管理考核单元编号', align: 'center', minWidth: 120,},
        {key: 'companyTypeName', title: '企业类型', align: 'center', minWidth: 120,},
                    { key:'projectName',title: '建设项目名称',  align: 'center', minWidth: 120,  },
                    { key:'projectTypeName',title: '建设项目类型',  align: 'center', minWidth: 120,  },
                    { key:'storage',title: '设计开采深度/设计最大边坡高度/设计总库容',  align: 'center', minWidth: 120,  },
                    { key:'designUnit',title: '安全设施设计单位',  align: 'center', minWidth: 120,  },
                    { key:'preEvaluationUnit',title: '安全预评价单位',  align: 'center', minWidth: 120,  },
                    { key:'reviewDepartment',title: '审查部门',  align: 'center', minWidth: 120,  },
                    { key:'constructionUnit',title: '施工单位',  align: 'center', minWidth: 120,  },
                    { key:'controlUnit',title: '监理单位',  align: 'center', minWidth: 120,  },
                    { key:'acceptanceTime',title: '竣工验收时间',  align: 'center', minWidth: 140, render: this.renderCellDate, sortable: 'custom', },
                    { key:'mobileNumber',title: '填报人手机号',  align: 'center', minWidth: 120,  },

                    // { key:'belongOrgName',title: '所属二级集团',  align: 'center', minWidth: 160, },
                    // { key:'createUserName',title: '填报人',  align: 'center',minWidth: 120, },
                    {key: 'createDate', title: '填报时间', align: 'center', minWidth: 120,render: this.renderCellDate, sortable: 'custom'},
                    // { key:'registrantPhone',title: '填报人手机号',  align: 'center',minWidth: 120, },
                    this.getActionColumns(),
                ],
                ruleCustom: {
                    // belongOrgId: [ { required: true, message: '请填写所属二级集团', trigger: 'change',}],
                    companyId: [ { required: true, message: '请填写单位名称', trigger: 'change',}],
                    unitNo: [ { required: true, message: '请填写绩效管理考核单元编号', trigger: 'change',}],
                    companyType: [ { required: true, message: '请填写企业类型', trigger: 'change',}],
                    projectName: [ { required: true, message: '请填写建设项目名称', trigger: 'change',}],
                    projectType: [ { required: true, message: '请填写建设项目类型', trigger: 'change',}],
                    storage: [ { required: true, message: '请填写设计开采深度/设计最大边坡高度/设计总库容', trigger: 'change',}],
                    designUnit: [ { required: true, message: '请填写安全设施设计单位', trigger: 'change',}],
                    preEvaluationUnit: [ { required: true, message: '请填写安全预评价单位', trigger: 'change',}],
                    reviewDepartment: [ { required: true, message: '请填写审查部门', trigger: 'change',}],
                    constructionUnit: [ { required: true, message: '请填写施工单位', trigger: 'change',}],
                    controlUnit: [ { required: true, message: '请填写监理单位', trigger: 'change',}],
                    acceptanceTime: [ { required: true, message: '请填写竣工验收时间', trigger: 'change',type:'date'}],
                    mobileNumber: [ {
                        validator: (rule, value, callback) => {
                            if(!(/^1[3456789]\d{9}$/.test(this.dataToView.mobileNumber))){
                                callback(' ');
                                // this.$Message.error("请填写有效的的手机号")
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                },
                tableHeight: 10,
                dictMap: {},
                // api
                queryUrl: Api.queryMineConSecurity,
                exportUrl: Api.exportMineConSecurity,
                deleteUrl: Api.deleteMineConSecurity,
                updateUrl: Api.updateMineConSecurity,
                saveUrl: Api.saveMineConSecurity,
                show:true,
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),

            }
        },
        async mounted() {
            this.setTableHeight();
            this.$http.get(Api.queryDictBycode+"env-00023,env-00024",{}).then((res)=>{
                this.dictMap = {
                    'companyTypeNames': res.data.data['env-00023'],
                    'projectTypeNames': res.data.data['env-00024']
                }
            }).catch(e => {this.$Message.error("数据字典获取失败")});
            this.query();
        },
        methods: {
            ...pageCommonFunction,


            deleteData(params) {
                this.deleteDateAjax(params);
            },
            exportList() {

                this.exportFormSubmit();
            },
            query() {
                // if (!this.dataToQuery.gasConsumptionType || this.dataToQuery.gasConsumptionType.length < 1) {
                //     this.dataToQuery.gasConsumptionType = null
                // }
                this.queryAjax();
            },

            submit(name) {
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName: this.currentUser.userName,
                    mobileNumber:this.currentUser.mobileNumber,
                    id: this.get_uuid(),
                    idFiles: [],

                }
            },
            async afterDataToViewInit() {
                // await this.getFiles1('id', 'MineConSecurity');
            },
            querySort({column, key, order}){
              this.dataToQuery.key = key;
              this.dataToQuery.order1 = order;
              this.query();
            }
        },
        watch: {},
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

</style>
